<template>
  <div class="w-full">
    <a-radio-group
      v-if="type === 'radio'"
      v-model="model"
      allow-clear
      :options="translateOptions(comOptions)"
      @change="onChange"
      :type="'button'"
    />
    <a-select
      class="w-full"
      v-else
      v-model="model"
      allow-clear
      :options="translateOptions(comOptions)"
      @change="onChange"
    />
  </div>
</template>

<script setup lang="ts">
import { scopeOptions } from "@/data/options/selection";
const model = defineModel();
const emit = defineEmits(["change"]);

const props = withDefaults(
  defineProps<{
    type?: "select" | "radio";
    /* 二选一，优先排除 */
    /* 如：传入 ['-'],则下拉列表只有本门店一个选项 */
    include?: string[];
    /* 如传入['-'],则显示除了本门店以外的其他选项 */
    exclude?: string[];
  }>(),
  {
    type: "select",
    exclude: () => [],
    include: () => ["1", "2", "3", "4", "5", "-"]
  }
);

const comOptions = computed(() => {
  if (props.exclude.length > 0) {
    return scopeOptions.filter((v) => {
      return props.exclude?.includes(v.value);
    });
  }

  return scopeOptions.filter((v) => {
    return props.include?.includes(v.value);
  });
});

const onChange = () => {
  emit("change");
};
</script>

<style lang="scss" scoped></style>
